.main-content
    h1
        | KNOW YOUR MENU
        small Hover on any menu item...
    .menu__wrapper
        div.menu__item--hamburger(tabindex="1")
            .line
            .line
            .line
        span Hamburger Menu
    .menu__wrapper
        div.menu__item--doner(tabindex="2")
            .line
            .line
            .line
        span Doner Menu
    .menu__wrapper
        div.menu__item--bento(tabindex="3")
            .box
            .box
            .box
            .box
            .box
            .box
            .box
            .box
            .box
        span Bento Menu
    .menu__wrapper
        div.menu__item--kebab(tabindex="4")
            .circle
            .circle
            .circle
            .circle
            .circle
        span Kebab Menu
    .menu__wrapper
        div.menu__item--meatball(tabindex="5")
            .circle
            .circle
            .circle
        span Meatball Menu

aside.context
    .explanation
        | Idea by
        a(href="https://twitter.com/michaelbabich/status/608618153757802497" target="_blank") @MichaelBabich,
        |  I'm just CSS-ing it.

footer
    a(href="https://twitter.com/meowlivia_" target="_blank")
        i.icon-social-twitter.icons
    a(href="https://github.com/oliviale" target="_blank")
        i.icon-social-github.icons
    a(href="https://dribbble.com/oliviale" target="_blank")
        i.icon-social-dribbble.icons